<template>
  <scroll-view
    class="container"
    scroll-y
    :show-scrollbar="false"
    enhanced
    @scroll="handleScroll"
    :scroll-top="scrollTop"
    scroll-with-animation
  >
    <swiper indicator-dots autoplay circular>
      <swiper-item v-for="banner in bannerList" :key="banner.id">
        <navigator :url="banner.linkUrl">
          <image
            class="banner-img"
            mode="scaleToFill"
            :src="banner.imageUrl"
            lazy-load
          />
        </navigator>
      </swiper-item>
    </swiper>

    <div class="cate-container flex">
      <div v-for="cate in hotCateList" :key="cate.id" class="cate-item flex">
        <img :src="cate.src" :alt="cate.name" class="cate-img" />
        <span class="cate-name">{{ cate.name }}</span>
      </div>
    </div>
    <CardList :data="courseList" title="热门课程">
      <template #more>
        <navigator url="/pages/course/list/index" open-type="switchTab">
          全部课程 >
        </navigator>
      </template>
    </CardList>
    <CardList :data="teacherList" title="名师大咖">
      <template #more>
        <navigator url="/pages/teacher/list/index"> 全部名师 > </navigator>
      </template>
    </CardList>
  </scroll-view>

  <BackToTop @setScrollTop="setScrollTop" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { hotCateList } from "@/common/mock/home";
import { getHomeBannerListApi, getHomeEduDataApi } from "@/api/home";
import type { BannerList } from "@/api/types";
import type { DataType } from "@/components/card-item/types";
import CardList from "@/components/card-list/card-list.vue";
import BackToTop from "@/components/back-to-top/back-to-top.vue";

// 页面滚动
const handleScroll = (e: any) => {
  // 全局事件总线
  uni.$emit("scroll", e.detail.scrollTop);
};
const scrollTop = ref(0);
// https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions
const setScrollTop = (val: number) => {
  scrollTop.value = val;
};

// 首页轮播图
const bannerList = ref<BannerList>([]);
onMounted(async () => {
  const res = await getHomeBannerListApi();
  bannerList.value = res.bannerList.sort((a, b) => a.sort - b.sort);
});

// 首页教师列表和课程列表
const teacherList = ref<DataType[]>([]);
const courseList = ref<DataType[]>([]);
onMounted(async () => {
  const res = await getHomeEduDataApi();
  teacherList.value = res.teacherList.map((teacher) => {
    return {
      id: teacher.id,
      imageUrl: teacher.avatar,
      name: teacher.name,
      title: teacher.intro,
      linkUrl: `/pages/teacher/detail/index?id=${teacher.id}`,
    };
  });
  courseList.value = res.courseList.map((course) => {
    return {
      id: course.id,
      imageUrl: course.cover,
      price: course.price,
      buyCount: course.buyCount,
      lessonNum: course.lessonNum,
      title: course.title,
      linkUrl: `/pages/course/detail/index?id=${course.id}`,
    };
  });
});
</script>

<style lang="scss" scoped>
// npm i sass -D
.banner-img {
  width: 100%;
  height: 300rpx;
}

.cate-container {
  justify-content: space-around;
}

.cate-item {
  flex-direction: column;
  align-items: center;
  height: 140rpx;
  padding: 20rpx 0;
  justify-content: space-between;
}

.cate-img {
  width: 80rpx;
  height: 80rpx;
}

.cate-name {
  font-size: $uni-font-size-sm;
  color: $uni-text-color;
}
</style>
